<template>
  <el-dialog
    v-model="visible"
    width="700px"
    :before-close="handleClose"
    :close-on-click-modal="false"
    class="unified-dialog savepoint-detail-dialog"
  >
    <template #header>
      <div class="dialog-header">
        <div class="header-icon header-icon-success">
          <el-icon><Clock /></el-icon>
        </div>
        <div class="header-content">
          <h3>Savepoint详情</h3>
          <p>查看Savepoint的完整信息和状态</p>
        </div>
      </div>
    </template>
    <div v-if="savepoint" class="savepoint-detail">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="作业ID" :span="2">
          <div class="path-container">
            <el-text type="info" class="path-text">{{ savepoint.job_id || '-' }}</el-text>
            <el-button
              v-if="savepoint.job_id"
              type="text"
              size="small"
              @click="copyToClipboard(savepoint.job_id, '作业ID')"
            >
              <el-icon><CopyDocument /></el-icon>
              复制
            </el-button>
          </div>
        </el-descriptions-item>
        
        <el-descriptions-item label="作业名称" :span="2">
          <el-tag type="primary" size="large">{{ savepoint.job_name }}</el-tag>
        </el-descriptions-item>
        
        <el-descriptions-item label="Savepoint路径" :span="2">
          <div class="path-container">
            <el-text size="small" class="path-text">{{ savepoint.savepoint_path || '-' }}</el-text>
            <el-button
              v-if="savepoint.savepoint_path"
              type="text"
              size="small"
              @click="copyToClipboard(savepoint.savepoint_path, 'Savepoint路径')"
            >
              <el-icon><CopyDocument /></el-icon>
              复制
            </el-button>
          </div>
        </el-descriptions-item>
        
        <el-descriptions-item label="创建时间">
          <el-text>{{ formatTime(savepoint.creation_time) }}</el-text>
        </el-descriptions-item>
        
        <el-descriptions-item label="触发原因">
          <el-tag 
            :type="getTriggerReasonType(savepoint.trigger_reason)"
            :effect="getTriggerReasonEffect(savepoint.trigger_reason)"
            class="status-tag"
          >
            <el-icon><component :is="getTriggerReasonIcon(savepoint.trigger_reason)" /></el-icon>
            <span>{{ getTriggerReasonLabel(savepoint.trigger_reason) }}</span>
          </el-tag>
        </el-descriptions-item>
        
        <el-descriptions-item label="状态" :span="2">
          <el-tag 
            :type="getStatusType(savepoint.status)"
            :effect="getStatusEffect(savepoint.status)"
            class="status-tag"
          >
            <el-icon><component :is="getStatusIcon(savepoint.status)" /></el-icon>
            <span>{{ getStatusLabel(savepoint.status) }}</span>
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
      
      <!-- 操作历史 -->
      <div v-if="savepoint.operation_history" class="operation-history">
        <h4>操作历史</h4>
        <el-timeline>
          <el-timeline-item
            v-for="(operation, index) in savepoint.operation_history"
            :key="index"
            :timestamp="formatTime(operation.timestamp)"
            :type="getOperationType(operation.type)"
          >
            {{ operation.description }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button
          v-if="savepoint?.job_id"
          type="info"
          @click="copyToClipboard(savepoint.job_id, '作业ID')"
        >
          <el-icon><CopyDocument /></el-icon>
          复制作业ID
        </el-button>
        <el-button
          v-if="savepoint?.savepoint_path"
          type="primary"
          @click="copyToClipboard(savepoint.savepoint_path, 'Savepoint路径')"
        >
          <el-icon><CopyDocument /></el-icon>
          复制路径
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Clock, CopyDocument } from '@element-plus/icons-vue'
import { componentLogger } from '@/utils/logger'
import { copyToClipboard as copyText } from '@/utils/clipboard'
import dayjs from 'dayjs'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  savepoint: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const handleClose = () => {
  visible.value = false
}

const getTriggerReasonType = (reason) => {
  const reasonMap = {
    'MANUAL': 'primary',
    'SCHEDULED': 'success',
    'CREATED': 'info',
    'STOP': 'warning',
    'RESTART': '',
    'FAILURE': 'danger',
    'AUTO': 'success',
    'FAILOVER': 'danger'
  }
  return reasonMap[reason] || 'info'
}

const getTriggerReasonEffect = (reason) => {
  const effectMap = {
    'MANUAL': 'dark',
    'SCHEDULED': 'plain',
    'CREATED': 'light',
    'STOP': 'plain',
    'RESTART': 'dark',
    'FAILURE': 'dark'
  }
  return effectMap[reason] || 'light'
}

const getTriggerReasonIcon = (reason) => {
  const iconMap = {
    'MANUAL': 'User',
    'SCHEDULED': 'Clock',
    'CREATED': 'Plus',
    'STOP': 'VideoPause',
    'RESTART': 'Refresh',
    'FAILURE': 'CircleClose'
  }
  return iconMap[reason] || 'QuestionFilled'
}

const getTriggerReasonLabel = (reason) => {
  const labelMap = {
    'MANUAL': '手动触发',
    'SCHEDULED': '定时触发',
    'CREATED': '创建触发',
    'STOP': '停止触发',
    'RESTART': '重启触发',
    'FAILURE': '失败触发'
  }
  return labelMap[reason] || reason || 'UNKNOWN'
}

const getStatusType = (status) => {
  const statusMap = {
    'CREATED': 'info',
    'COMPLETED': 'success',
    'FAILED': 'danger',
    'IN_PROGRESS': 'warning',
    'PENDING': 'info',
    'CANCELLED': ''
  }
  return statusMap[status] || 'info'
}

const getStatusEffect = (status) => {
  const effectMap = {
    'CREATED': 'plain',
    'COMPLETED': 'dark',
    'FAILED': 'dark',
    'IN_PROGRESS': 'plain',
    'PENDING': 'light',
    'CANCELLED': 'plain'
  }
  return effectMap[status] || 'light'
}

const getStatusIcon = (status) => {
  const iconMap = {
    'CREATED': 'DocumentAdd',
    'COMPLETED': 'CircleCheck',
    'FAILED': 'CircleClose',
    'IN_PROGRESS': 'Loading',
    'PENDING': 'Clock',
    'CANCELLED': 'Remove'
  }
  return iconMap[status] || 'QuestionFilled'
}

const getStatusLabel = (status) => {
  const labelMap = {
    'CREATED': '已创建',
    'COMPLETED': '已完成',
    'FAILED': '已失败',
    'IN_PROGRESS': '进行中',
    'PENDING': '等待中',
    'CANCELLED': '已取消'
  }
  return labelMap[status] || status || 'UNKNOWN'
}

const getOperationType = (type) => {
  const typeMap = {
    'CREATE': 'primary',
    'UPDATE': 'warning',
    'DELETE': 'danger',
    'RESTORE': 'success'
  }
  return typeMap[type] || 'info'
}

const formatTime = (time) => {
  if (!time) return '-'
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

// 复制到剪贴板 - 使用统一工具
const copyToClipboard = async (text, label = '内容') => {
  await copyText(text, label)
}
</script>

<style scoped>
/* 对话框已使用统一样式系统 (dialog-system.css) */

.savepoint-detail-dialog :deep(.el-dialog__body) {
  max-height: 600px;
  overflow-y: auto;
}

/* 内容样式 */
.savepoint-detail {
  padding: 0;
}

/* Descriptions 样式优化 */
.savepoint-detail :deep(.el-descriptions) {
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.savepoint-detail :deep(.el-descriptions__header) {
  background: #f8f9fa;
  padding: 16px;
  border-bottom: 2px solid #409eff;
}

.savepoint-detail :deep(.el-descriptions__body) {
  background: #fff;
}

.savepoint-detail :deep(.el-descriptions__label) {
  font-weight: 500;
  color: #606266;
  background: #f8f9fa;
}

.savepoint-detail :deep(.el-descriptions__content) {
  font-size: 14px;
  color: #303133;
}

.path-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.path-text {
  flex: 1;
  word-break: break-all;
  line-height: 1.4;
}

.extra-info {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.extra-info h4 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.operation-history {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.operation-history h4 {
  margin: 0 0 16px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Timeline 样式优化 */
.operation-history :deep(.el-timeline-item__timestamp) {
  color: #909399;
  font-size: 13px;
}

.operation-history :deep(.el-timeline-item__content) {
  color: #606266;
  font-size: 14px;
}

/* 滚动条样式 */
.savepoint-detail-dialog :deep(.el-dialog__body)::-webkit-scrollbar {
  width: 6px;
}

.savepoint-detail-dialog :deep(.el-dialog__body)::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.savepoint-detail-dialog :deep(.el-dialog__body)::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.savepoint-detail-dialog :deep(.el-dialog__body)::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 状态标签样式优化 */
.status-tag {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.status-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.status-tag .el-icon {
  font-size: 14px !important;
  display: inline-flex;
  align-items: center;
}

.status-tag span {
  line-height: 1;
  white-space: nowrap;
}

/* 针对不同状态的特殊样式 */
.status-tag.el-tag--success.el-tag--dark {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  border: none;
  color: white;
}

.status-tag.el-tag--success.el-tag--plain {
  background: rgba(103, 194, 58, 0.1);
  border-color: #67c23a;
  color: #67c23a;
}

.status-tag.el-tag--danger.el-tag--dark {
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
  border: none;
  color: white;
}

.status-tag.el-tag--warning.el-tag--plain {
  background: rgba(230, 162, 60, 0.1);
  border-color: #e6a23c;
  color: #e6a23c;
}

.status-tag.el-tag--primary.el-tag--dark {
  background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
  border: none;
  color: white;
}

.status-tag.el-tag--info.el-tag--plain {
  background: rgba(64, 158, 255, 0.1);
  border-color: #409eff;
  color: #409eff;
}

.status-tag.el-tag--info.el-tag--light {
  background: rgba(144, 147, 153, 0.08);
  border-color: rgba(144, 147, 153, 0.3);
  color: #606266;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .savepoint-detail-dialog {
    width: 95% !important;
    margin: 0 auto;
  }
}
</style>
